<template>
    <div class="live page" v-if="live">
        <liveVideoI
                v-if="!mobileType"
                :src="live.pull+'.m3u8'"
                :backSrc="live.back"
                :title="live.theme"
                @fullScreen="showCart=!$event"
                :goods="live.goods"
                :shop="live.shopEntity"
                :poster="live.img"
                :camera="live.camera"
                @shareLive="shwoPoster"
        ></liveVideoI>
        <liveVideoA
                v-if="mobileType"
                :src="live.pull+'.flv'"
                :backSrc="live.back"
                :title="live.theme"
                @fullScreen="showCart=!$event"
                :goods="live.goods"
                :shop="live.shopEntity"
                :poster="live.img"
                :camera="live.camera"
                @shareLive="shwoPoster"
        ></liveVideoA>
        <liveCart v-show="showCart" :goods="live.goods"></liveCart>
        <div class="share" v-show="isShare" @click="()=>{isShare = false}">
            <div v-if="!showShare" class="poster" ref="poster">
                <div class="img"><img :src="imgH+live.img"></div>
                <div v-if="live.shopEntity" class="title"><img :src="live.shopEntity.avatar">我在社集优选开了个直播间，快来为我打Call吧~</div>
                <div v-else class="title"><img src="./sjyx.png">我在社集优选开了个直播间，快来为我打Call吧~</div>
                <div class="qrcode"><img :src="wxQrCode"></div>
                <div class="tips">长按识别二维码，进我直播间为我打Call吧~</div>
            </div>
            <img v-if="showShare" class="posterImg" :src="shareImg">
        </div>
    </div>
</template>

<script>


    import liveVideoI from '@/components/live-video/liveVideoI'
    import liveVideoA from '@/components/live-video/liveVideoA'
    import liveCart from "@/components/live-video/liveCart";
    import {getLive} from  '@/api/live'
    import {hide, showLoading} from "../../toast";
    import {share} from "../../api/point";
    export default {
        name: "index",
        components:{liveVideoI,liveCart,liveVideoA},
        data(){
            return{
                showCart:false,
                live:null,
                wxQrCode:null,
                shareImg:null,
                flag:true,
                isShare:false,
                showShare:false,
                imgH:process.env.VUE_APP_IMG_DOMAIN,
                mobileType:0,
            }
        },
        methods:{
            getCode(){
                let QRCode = require('qrcode')
                let id = 0
                if (this.live.shopEntity){
                    id = this.live.shopEntity.userId
                }
                let url =  process.env.VUE_APP_PATH + '/live?'+'id'+'='+this.$route.query.id+'&'+process.env.VUE_APP_TOP_USER_ID+'='+id
                QRCode.toDataURL(url, {type:'terminal'}, (err, url)=> {
                    this.wxQrCode = url
                })
            },
            shwoPoster(){
                this.isShare=true
                if (!this.flag){
                    return;
                }else {
                    showLoading('正在生成分享海报')
                    setTimeout(()=>{
                        this.plantGrant()
                    },200)
                }
            },
            async plantGrant(){
                let grant = this.$refs.poster
                const options = {
                    type: 'dataURL',
                    useCORS: true
                }
                this.shareImg = await this.$html2canvas(grant, options);
                console.log(this.shareImg);
                this.flag=false
                this.showShare=true
                hide()
            },
        },
        mounted() {
            getLive(this.$route.query.id).then(res=>{
                this.live = res.data
                // if (!this.live.flag){
                //     this.live.pull=this.live.back
                // }
                this.getCode()
                console.log(res);
            })

        },
        created() {
            let u = navigator.userAgent;
            let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //判断是否是 android终端
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
            if (isAndroid) {
                console.log("Android")
                this.mobileType = 1
            } else if (isIOS) {
                console.log("iOS")
                this.mobileType = 0
            } else {
                console.log("其它")
                this.mobileType = 0
            }
        }

    }
</script>

<style scoped lang="stylus">
.live
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    .share
        position fixed
        width 100%
        height 100%
        top: 0
        z-index 888
        display flex
        justify-content center
        align-items center
        .posterImg
            width: 351px
            height: 493px
            background-color: #fff
            border-radius: 8px;
        .poster
            width: 351px
            height: 493px
            background-color: #fff
            border-radius: 8px;
            display flex
            flex-direction column
            align-items center
            .img
                width: 351px
                height: 262.5px
                img
                    width: 351px
                    height: 262.5px
                    border-radius: 8px 8px 0 0 ;
            .title
                margin-top 10px
                display flex
                align-items center
                font-size: 11px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #909999;
                line-height: 16px;
                height: 32px;
                background: #FCF6EB;
                border-radius: 100px;
                img
                    width: 36px
                    height: 36px
                    margin-right 10px
                    border-radius 50%
            .qrcode
                margin-top 30px
                width: 100px
                height: 100px
                img
                    width: 100px
                    height: 100px
            .tips
                margin-top 10px
                font-size: 10px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #909999;
                line-height: 14px;

</style>